<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"
        type="text/javascript"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <link rel="stylesheet" href="static/css/style.css">
    <title></title>
</head>
<body>
    <div id="demo">
        <div align="middle">
            <form method="get">
                <label>
                    <input type="text" maxlength="100" style="width: 500px" value="{{.Query}}" name="q">
                </label>
                <button type="submit">搜索</button>
            </form>
        </div>

        <!-- {{.Hits}} 表示把 Hits 中的值填进来 -->
        <!-- {{len .Items}} 表示计算 Items 的长度 -->
        <h2>共为你找到相关结果约为{{.Hits}}个。显示从{{.Start}}起共{{len .Items}}个。</h2>

        <!-- Responsive table starts here -->
        <!-- For correct display on small screens you must add 'data-title' to each 'td' in your table -->
        <div class="table-responsive-vertical shadow-z-1">
            <!-- Table starts here -->
            <table id="table" class="table table-striped table-hover table-mc-indigo">
                <tbody>
                    <!-- 模板语言中, 不要在 html 的注释中使用模板语言, 如两个花括号 -->
                    <!-- range .Items 对 Items 进行循环 -->
                    <!-- 对于 Items 中的每一个元素, 都会生成 <tr> 标签 -->
                    {{range .Items}}
                    <tr>
                        <td><a href="{{.Url}}">{{.Payload.Name}}</a></td>
                        <!-- with .Payload 表示把 Payload 中的值填进来 -->
                        {{with .Payload}}
                        <td>{{.Gender}}</td>
                        <td>{{.Age}}</td>
                        <td>{{.Height}}cm</td>
                        <td>{{.Weight}}kg</td>
                        <td>{{.Income}}</td>
                        <td>{{.Education}}</td>
                        <td>{{.Occupation}}</td>
                        <td>{{.Hokou}}</td>
                        <td>{{.Xingzuo}}</td>
                        <td>{{.House}}</td>
                        <td>{{.Car}}</td>
                        <!-- end 表示结束 with 语句 -->
                        {{end}}
                    </tr>
                    <!-- else 表示如果 Items 为空, 则生成 <div> 标签 -->
                    {{else}}
                    <div>没有找到相关用户</div>
                    <!-- end 表示结束 range 语句 -->
                    {{end}}
                </tbody>
            </table>
            <div style="text-align: center">
                {{if ge .PrevFrom 0}}
                <a href="search?q={{.Query}}&from={{.PrevFrom}}">上一页</a>
                {{end}}
                <a href="search?q={{.Query}}&from={{.NextFrom}}">下一页{{.NextFrom}}</a>
            </div>
        </div>

        <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
        <script src="static/js/index.js"></script>
    </div>
</body>
</html>